<template>
    <div class="discover" ref="discover">
        <div class="container">
            <div class="item-bar" v-for="(item, index) in itemList" :key="index">
                <div class="left-icon" style="background-color: #df5000">
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="item.icon"></use>
                    </svg>
                </div>
                <div class="right-text-box">
                    <div class="title">
                        <span>{{ item.title }}</span>
                        <span class="data-time">{{ item.dataTime }}</span>
                    </div>
                    <div class="text-detail">
                        {{ item.desc }}
                    </div>
                </div>
            </div>
        </div>
        <tips :show="tipShow"></tips>
    </div>
</template>

<script>
    /*
    * 发现
    * */
    import tips from "@/components/tips/tips"; // 退出系统提示
    export default {
        name: "discover",
        data() {
            return {
                itemList: [
                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    },
                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    },
                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    },
                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    },                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    },
                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    },
                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    },
                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    },
                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    },
                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    },
                    {
                        title: '管理小助手',
                        icon: '#icon-xuesheng',
                        dataTime: '下午2:37',
                        desc: '网络教育招生计划于2021年5月8号即在西南交通大学开通报名通大学开通报名'
                    }

                ],
                tipShow: false, // 是否显示退出页面提示
            }
        },

        mounted() {
            // 通过 addEventListener 方法注册事件的时候需要格外小心
            // 如果在 destroyed 钩子函数中没有销毁 scroll 事件
            // 在激活 home 组件的时候会再次绑定 scroll 事件
            // window.addEventListener('scroll', this.justifyPos)
            // 通过 on 方式绑定事件能够有效避免上述情况
            window.onscroll = this.justifyPos


            // this.$refs.discover.parentNode.scrollTop = this.$route.meta.y
            // document.body.childNodes[4].scrollTop = this.$route.meta.y

            // 对 history 做一些处理
            if (window.history && window.history.pushState) {
                history.pushState(null, null, document.URL)
                window.addEventListener('popstate', this.popstate, false)
            }
        },
        beforeDestroy() {
            window.removeEventListener('popstate', this.popstate)
        },
        methods: {
            justifyPos () {
                // 节流；
                if (this.timerId) clearTimeout(this.timerId)
                this.timerId = setTimeout(() => {
                    // 获取页面滚动距离之后设置给当前路由的 元信息
                    this.$route.meta.y = window.pageYOffset
                }, 300)
            },
            /*
            * 连续按下两次返回键则就退出系统
            * */
            popstate() {
                // 第一次按下返回键做处理（只有进入组件的第一次按下才会进入这里，后面无论多少次都不进入）
                if (this.firstTime === undefined) {
                    this.firstTime = new Date().getTime();
                    this.tipShow = true
                    history.pushState(null, null, document.URL)
                    if(this.timeout) clearTimeout(this.timeout)
                    this.timeout = setTimeout(() => {
                        this.tipShow = false
                    }, 1000)
                    return;
                }
                // 如果不是第一次按下返回键，判断是否在第一次按下返回键的 1 秒之内再次按下返回键，如果是就退出系统
                const status = new Date().getTime() - this.firstTime > 1000
                if (status) {
                    this.firstTime = new Date().getTime()
                    this.tipShow = true
                    history.pushState(null, null, document.URL)
                    if(this.timeout) clearTimeout(this.timeout)
                    this.timeout = setTimeout(() => {
                        this.tipShow = false
                    }, 1000)
                    return;
                }
                // 退出系统
                this.$router.go(-(history.length - 3))
            }
        },
        components: {
            tips
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/styles/icon_small.scss";
    .discover {
        background-color: white;
        padding-bottom: 66px;
        .container {
            padding: 20px;
            .item-bar {
                overflow: hidden;
                margin-bottom: 20px;
                .left-icon {
                    width: 44px;
                    height: 44px;
                    border-radius: 12px;
                    float: left;
                }
                .right-text-box {
                    padding-left: 10px;
                    width: 291px;
                    box-sizing: border-box;
                    text-align: left;
                    float: left;
                    line-height: 22px;
                    .title {
                        font-size: 14px;
                        font-weight: 700;
                        overflow: hidden;
                        .data-time {
                            float: right;
                            display: inline-block;
                            color: #a5a5a5;
                            font-size: 12px;
                            font-weight: 500;
                        }
                    }
                    .text-detail {
                        color: #a5a5a5;
                        white-space:nowrap;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        font-size: 12px;
                    }
                }
            }
        }
    }
</style>